<template>
  <div class="box">
    <div class="select">
      <div
        class="tou"
        @click="titlesIndex = index"
        :class="index == titlesIndex? 'active' : ''"
        v-for="(item,index) in head"
        :key="index"
      ><i :class="item.icon"></i>{{item.name}}</div>
    </div>

    <div class="one_way" v-if="!titlesIndex">
        <el-form class="search-form-content" ref="form" label-width="80px">
            <el-form-item label="出发城市">
                <el-autocomplete
                    popper-class="my-autocomplete"
                    :trigger-on-focus="false"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入出发城市"
                    v-model="form.departCity"
                    @select="handleSelect">
                </el-autocomplete>
            </el-form-item>
            <el-form-item label="到达城市">
                <el-autocomplete
                    popper-class="my-autocomplete"
                    :trigger-on-focus="false"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入到达城市"
                    v-model="form.destCity"
                    @select="ArriveHandleSelect">
                </el-autocomplete>
            </el-form-item>

            <!-- 时间选择框 -->
            <el-form-item label="选择时间">
                <div class="block">
                    <el-date-picker
                    v-model="form.departDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    @change="handleDate"
                    :picker-options='pickerOptions'
                    placeholder="选择日期">
                    </el-date-picker>
                </div>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" style="width: 80%;" @click="search">搜索</el-button>
            </el-form-item>
            <div class="huan" @click="exchange">换</div>
        </el-form>
    </div>

  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      head: [{ icon:"iconfont icondancheng",name: "单程" }, { icon: "iconfont iconshuangxiang", name: "返程" }],
      titlesIndex: 0,
      state: "",
      form:{
          departCity:'',
          departCode: '',
          destCity: '',
          destCode: '',
          departDate:'',
      },
      pickerOptions:{
          disabledDate(date){
             return date.getTime() + 24 * 60 * 60 * 1000 < Date.now();
          }
      }
    };
  },
  methods: {
      querySearch(val,cb){   //出发搜索
        this.$axios({
            url:'http://localhost:1337/airs/city',
            params:{
                name:val
            }
        })
        .then(res=>{
            console.log(res);
            let search = res.data.data.map(v=>{
                return {
                    ...v,
                    value:v.name.split('市')[0]
                }
            })
            console.log('城市机票');
            console.log(search);
            cb(search)
        })
      },
      handleSelect(item){  //出发城市搜索结果点击事件
        //   let name = item.name.split('市')[0]
        //   this.form.departCity = name
          this.form.departCode = item.sort
      },

      ArriveQuerySearch(val,cb){  //到达搜索
        this.$axios.get('/airs/city',{params:{name:this.form.destCity}})
        .then(res=>{
            console.log('到达搜索');
            console.log(res);
            let list = res.data.data.map(a=>{
                return {
                    ...a,
                    value: a.name
                }
            })
            cb(list)
        })
      },
      ArriveHandleSelect(item){  //到达点击
          this.form.destCode = item.sort
      },

      handleDate(time){
          //使用moment时间格式插件的方法设置格式
          this.form.departDate = moment(time).format('YYYY-MM-DD') 
          //element-ui时间组件也提供有方法,设置时间格式
      },
        //点击交换
      exchange(){
          [this.form.departCity, this.form.departCode, this.form.destCity, this.form.destCode ] = [this.form.destCity, this.form.destCode, this.form.departCity, this.form.departCode]
      },
        //点击搜索
      search(){
          let data = {
            departCity:{value: this.form.departCity, msg: '请输入出发城市'},
            departCode: {value: this.form.departCode, msg: '请输入出发城市'},
            destCity: {value: this.form.destCity, msg: '请输入目标城市'},
            destCode: {value: this.form.destCode, msg: '请输入目标城市'},
            departDate: {value: this.form.departDate, msg: '请选择乘机时间'},
          }
            // Object.values(变量) Es6数组方法  返回一个数组   every 遍历 如果 有一次返回false,则停止循环
           let isOk =  Object.values(data).every(v=>{
              if(v.value){
                  return true
              }else{
                  this.$message.error(v.msg)
                  return false
              }
          })

          if(isOk){
              this.$router.push({path:'/air/ticket',query:this.form})

                let {departCity,destCity,departDate} = this.form
                console.log(departCity,destCity,departDate);
              // 储存到本地
              this.$store.commit('air/setHistory', {departCity,destCity,departDate})
          }else{
              return
          }
      } 

  },
};
</script>

<style lang="less" scoped>

/deep/  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 204px;
}

.box {
  width: 100%;
  height: 100%;
  .select {
    display: flex;
    .tou {
      width: 50%;
      line-height: 46px;
      text-align: center;
      background: #dddddd;
      &.active {
        background: #ffffff;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 3px;
          background-color: #ffa500;
          top: 0;
          left: 0;
        }
      }
    }
  }
  .one_way {
    padding: 30px 0 0 10px;
    position: relative;
    .huan {
        font-size: 12px;
        background: #999999;
        padding: 3px;
        line-height: 12px;
        color: #ffffff;
        position: absolute;
        top: 72px;
        right: 14px;
        cursor: pointer;
        &::before{
            content: "";
            position: absolute;
            border: solid 1px #dddddd;
            border-left: none;
            height: 62px;
            width: 25px;
            top: -22px;
            left: -14px;
            z-index: -1;
        }
    }
  }
}
</style>